<template>
  <div>
    <div class="top_title title">
      <span>登录</span>
    </div>
    <div class="weui-cells weui-cells_after-title">
      <div
        class="weui-cell weui-cell_input weui-cell_vcode"
        style="height:0.5remrem;line-height:0.45rem;"
      >
        <div class="weui-cell__hd">
          <div class="weui-label font_size09">手机号码</div>
        </div>
        <div class="weui-cell__bd" style="font-size:0.30rem;color:#404040;">
          <input
            class="weui-input"
            style="display: block;"
            placeholder="请输入手机号"
            placeholder-style="font-size:0.30rem;color:#c7c7c7;"
            data-key="mobile"
          />
        </div>
      </div>
      <div
        class="weui-cell weui-cell_input weui-cell_vcode"
        style="height:0.5remrem;line-height:0.45rem;"
      >
        <div class="weui-cell__hd">
          <div class="weui-label font_size09">验证码</div>
        </div>
        <div class="weui-cell__bd">
          <input
            class="weui-input"
            style="display: block;"
            placeholder="请输入验证码"
            placeholder-style="font-size:0.30rem;color:#c7c7c7;"
            type="number"
            data-key="code"
          />
        </div>
        <div class="weui-cell__ft" style="width:30%;">
          <div class="div_getYzm">
            <span class="font_size20 tt_code">获取验证码</span>
          </div>
        </div>
        <div class="weui-cell__ft">
          <div class="div_getYzm font_size7">
            <!-- <count-down :second="60" @timeup="timeup" ref="countdownend" class="djs" v-if="isShowDjs"></count-down> -->
          </div>
        </div>
      </div>
    </div>
    <div class="bindphone_btn txt_center">
      <button class="btn">立即绑定</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background:#f8f8f8; overflow-x: hidden;");
  }
};
</script>
<style scoped>
@import "../../../common/style/weui.css";
.top_title {
  width: 100%;
  color: #ffffff;
  text-align: center;
  height: 1.28rem;
  font-size: 0.36rem;
  line-height: 1.28rem;
  font-family: PingFangSC-Regular;
  //background-color:$fontcolor;
}
body {
  background-color: #f8f8f8;
}
.bindphone {
  background-color: #ffffff;
}

.v_phone {
  padding: 0.2rem;
  border-bottom: 1px solid #d9d9d9;
}
.bindphone_btn {
  margin-top: 0.3rem;
}

.btn {
  display: inline-block;
  width: 6.74rem;
  height: 0.8rem;
  background-color: #1777ff;
  color: #ffffff;
  font-size: 0.36rem;
  line-height: 0.8rem;
  border-radius: 0.05rem;
  border: unset;
}

.view_getYzm {
  width: 100%;
}

.btn_yzm {
  font-size: 0.3rem;
  color: #0195ff;
  background-color: #fff;
  border-radius: 0px;
  height: 180%;
  line-height: 180%;
  display: table;
  width: 100%;
}

.btn_yzm::after {
  border: 0 solid #fff;
}

.btn_yzm text {
  vertical-align: middle;
  display: table-cell;
}

.weui-label {
  width: 1.6rem;
}

.weui-cell__ft {
  text-align: unset;
}
.tt_code {
  display: inline;
  border: 0.01rem solid #fdab1b;
  border-radius: 0.05rem;
  padding: 0.05rem;
}
</style>